<template>
  <div class="home-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">订单管理</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">订单列表</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form
        ref="orderFormref"
        :model="queryInfo"
        label-width="90px"
        class="form"
      >
        <el-row type="flex" justify="space-between">
          <el-col :span="6" class="form-top" :style="{'max-height':(isShow?42+'px':300+'px')}" >
            <el-form-item label="订单编号" prop="orderNum">
              <el-input v-model="queryInfo.orderNum"></el-input>
            </el-form-item>
            <el-form-item label="支付状态" prop="is_pay">
              <el-select v-model="queryInfo.is_pay" placeholder="请选择">
                <el-option key="0" label="待支付" value="0"> </el-option>
                <el-option key="1" label="已支付" value="0"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发货情况" prop="is_deliver">
              <el-select v-model="queryInfo.is_deliver" placeholder="请选择">
                <el-option key="0" label="未发货" value="0"> </el-option>
                <el-option key="1" label="已发货" value="0"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单状态" prop="order_status">
              <el-select v-model="queryInfo.order_status" placeholder="请选择">
                <el-option key="0" label="进行中" value="0"> </el-option>
                <el-option key="1" label="已完成" value="0"> </el-option>
                <el-option key="2" label="已关闭" value="0"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收货时间" prop="finishTime">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="queryInfo.finishTime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="btn-box">
            <el-button type="text" class="btn-stretch" @click="hideAndShow()">{{isShow?'展开':'收起'}}</el-button>
            <el-button @click="resetAddForm('orderFormref')">重置</el-button>
            <!-- <el-button @click="addGood()">新增</el-button> -->
            <el-button type="primary" class="btn-blue" @click="getGoodsList()"
              >查询</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-table
        :data="orderList"
        style="width: 100%; margin-top: 20px"
        border
        stripe
      >
        <el-table-column
          type="index"
          label="序号"
          :index="indexMethod"
          width="80"
        >
        </el-table-column>
        <el-table-column prop="orderNum" label="订单编号" width="200"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="120"> </el-table-column>
        <el-table-column prop="is_pay" label="是否支付">
          <template slot-scope="scope">
            <el-tag
              type="success"
              v-if="scope.row.order_status != 2 && scope.row.is_pay == 1"
              >已支付</el-tag
            >
            <el-tag
              type="warning"
              v-if="scope.row.order_status != 2 && scope.row.is_pay == 0"
              >待支付</el-tag
            >
            <el-tag type="info" v-if="scope.row.order_status == 2"
              >已关闭</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="is_deliver" label="是否发货">
          <template slot-scope="scope">
            <el-tag
              type="success"
              v-if="scope.row.order_status != 2 && scope.row.is_deliver == 1"
              >已发货</el-tag
            >
            <el-tag
              type="warning"
              v-if="scope.row.order_status != 2 && scope.row.is_deliver == 0"
              >待发货</el-tag
            >
            <el-tag type="info" v-if="scope.row.order_status == 2"
              >已关闭</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column>
        <el-table-column prop="finishTime" label="收货时间" width="180"> </el-table-column>
        <el-table-column prop="order_status" label="订单状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.order_status == 1"
              >已完成</el-tag
            >
            <el-tag type="warning" v-if="scope.row.order_status == 0"
              >进行中</el-tag
            >
            <el-tag type="info" v-if="scope.row.order_status == 2"
              >已关闭</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="340">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              class="btn-blue"
              v-if="scope.row.order_status == 0 && scope.row.is_deliver == 0 "
              @click="changeDeliver(scope.row)"
              >发货</el-button
            >
            <el-button
              type="primary"
              class="btn-blue"
              v-if="scope.row.order_status != 2 && scope.row.is_deliver == 1"
              >查看物流
            </el-button>
            <el-button
              type="warning"
              v-if="scope.row.order_status != 2 && scope.row.is_deliver == 1"
              @click="
                btnOptCommon(scope.row.id, 'delayTime', '是否确认延长收货？')
              "
              >延长收货</el-button
            >

            <el-button
              type="danger"
              @click="
                btnOptCommon(scope.row.id, 'delOrder', '是否确认删除订单？')
              "
              >删除订单</el-button
            >
            <el-button
              type="info"
              v-if="scope.row.order_status != 2 && scope.row.is_pay == 0"
              @click="
                btnOptCommon(scope.row.id, 'cancelOrder', '是否确认取消订单？')
              "
              >取消订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.page" :page-size="queryInfo.limit" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      queryInfo: {
        limit: 10,
        page: 1,
        query: '',
        orderNum: '',
        is_pay: '',
        finishTime: '',
        order_status: '',
        is_deliver: ''
      },
      isShow: true,
      total: 0,
      orderList: []
    }
  },
  created () {
    this.getOrderList()
  },
  computed: {},
  methods: {
    open_editForm (id) {},
    indexMethod (index) {
      return (this.queryInfo.page - 1) * this.queryInfo.limit + index + 1
    },
    async getOrderList () {
      const { data: res } = await this.$http.post(
        '/order/getAllOrder',
        this.queryInfo
      )
      if (res.code !== 200) return this.$message.error(res.msg)
      this.orderList = res.data.data
      this.total = res.data.total
    },
    btnOptCommon (id, url, text) {
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.post(`/order/${url}`, {
          id: id
        })
        if (res.code !== 200) return this.$message.error(res.msg)
        this.getOrderList()
      })
    },
    handleSizeChange (val) {
      this.queryInfo.limit = val
      this.getOrderList()
    },
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getOrderList()
    },
    changeDeliver (item) {
      if (item.is_pay === 0) {
        return this.$message.error('买家尚未完成付款!')
      }
      const id = item.id
      this.$prompt('请输入快递单号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern:
          /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '快递单号格式不正确'
      }).then(async () => {
        const { data: res } = await this.$http.post('/order/changeIsDeliver', {
          id: id
        })
        if (res.code !== 200) return this.$message.error(res.msg)
        this.getOrderList()
      })
    },
    hideAndShow () {
      this.isShow = !this.isShow
    }
  }
}
</script>
<style lang="less" scoped>
.el-form-item {
  margin-bottom: 0;
}
.form-top {
  /* width: calc(100% - 100px); */
  width: 80%;
  height: auto;
  flex-wrap: wrap;
  /* flex:1; */
  display: flex;
  // border: 1px solid red;
  max-height: 42px;
  overflow: hidden;
  transition: max-height 0.5s;
  .el-form-item {
    margin-bottom: 15px;
    width: 290px;
  }
}
.btn-box {
  width: 20%;
  // height: 100%;
  // border: 1px solid red;
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end ;
}
</style>
